<template>
  <div class="banner_col">
    <div class="warn-box">
      <svg-icon style="margin-right:17px" icon-class="warn" :size="20" />
      <p><span>商品图片要求！</span><br />图片尺寸请采用122*154px</p>
    </div>
    <div class="item">
      <div class="head">
        <p class="main-title">主标题</p>
        <p class="vice-title" @click="changeViceTitle" :class="{ active: viceFlag }">
          {{ viceFlag ? "关闭副标题" : "添加副标题" }}
        </p>
      </div>
      <input type="text" v-model="mainTitle">
    </div>
    <div class="item" v-show="viceFlag">
      <div class="head">
        <p class="main-title">副标题</p>
      </div>
      <input type="text" v-model="viceTitle">
    </div>
    <div class="item">
      <p class="b10">更多跳转的URL</p>
      <input type="text" v-model="junpUrl">
    </div>

    <link-dialog ref="linkDialog" @setVal="setVal" />

    <el-row :gutter="20">
      <el-col v-for="(item, index) in carousel" :span="24" :key="index">
        <banner-form type="appleCard" :item-index="index" :form-data="item" :show-tool="true"
          @upSortItem="upSortItem(index)" @downSortItem="downSortItem(index)" @deleteItem="deleteItem(index)">
        </banner-form>
      </el-col>
    </el-row>
    <div v-if="carousel.length < maxLenght" class="add-div" @click="addLink">
      <i class="el-icon-link">添加商品</i>
    </div>
  </div>
</template>

<script>
import bannerForm from "../components/bannerForm";
import colForm from "../components/colForm";
import linkDialog from '../components//linkDialog.vue';
export default {
  components: { bannerForm, colForm, linkDialog },
  name: "hotSale",
  data() {
    return {
      carousel: [],
      maxLenght: 10,
      viceFlag: false,
      mainTitle: "",
      viceTitle: "",
      junpUrl: "",
    }
  },
  methods: {
    addLink() {
      this.$refs.linkDialog.dialogVisible = true
    },
    setVal({ jumpType, jumpUrl, goods }) {
      this.carousel.push({
        img: goods.imgurl,
        jumpType,
        jumpUrl,
        goods,
      })
    },
    getData() {
      if (!this.mainTitle) {
        return this.$message({
          message: '请输入主标题',
          type: 'warning'
        })
      }
      if (!this.junpUrl) {
        return this.$message({
          message: '请输入更多跳转的URL',
          type: 'warning'
        })
      }
      if (!this.carousel.length) {
        return this.$message({
          message: '当前商品还未添加',
          type: 'warning'
        })
      }
      return {
        carousel: this.carousel,
        viceFlag: this.viceFlag,
        mainTitle: this.mainTitle,
        viceTitle: this.viceTitle,
        junpUrl: this.junpUrl,
      }
    },
    changeViceTitle() {
      this.viceFlag = !this.viceFlag;
    },
    // 升序
    upSortItem(index) {
      if (index === 0) return;
      let item = this.carousel[index];
      this.$set(this.carousel, index, this.carousel[index - 1]);
      this.$set(this.carousel, index - 1, item);
    },
    // 降序
    downSortItem(index) {
      if (index === this.carousel.length - 1) {
        return;
      }
      let item = this.carousel[index];
      this.$set(this.carousel, index, this.carousel[index + 1]);
      this.$set(this.carousel, index + 1, item);
    },
    // 删除推荐位
    deleteItem(index) {
      this.carousel.splice(index, 1);
    },
  }
}
</script>

<style lang="scss" scoped>
/deep/.link_val {
  margin-bottom: 15px;
}

.item {
  margin-bottom: 10px;

  .head {
    font-size: 12px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;

    .main-title {
      padding: 4px 0;
    }

    .vice-title {
      cursor: pointer;
      padding: 4px 10px;
      user-select: none;
      border-radius: 2px;
      color: #2993ff;
      border: 1px solid #2993ff;
      transition: all .5s;

      &.active {
        color: #e14343;
        border: 1px solid #e14343;
      }
    }
  }

  input {
    outline: 0;
    border-radius: 3px;
    width: 375px;
    height: 30px;
    padding: 5px;
    box-sizing: border-box;
    font-size: 14px;
    border: 1px solid #eeeeee;
  }
}
</style>
